<template>
    <div style="margin-bottom:20px">
        <RouterLink to="/test">跳转Test</RouterLink>
    </div>
    <div style="margin-bottom:20px">
        <el-button type="primary" @click="router.push('/test')">跳转</el-button>
        <el-button type="primary" @click="router.replace('/test')">replace跳转</el-button>
    </div>
    <div style="margin-bottom: 20px;">
        <el-button type="primary" @click="router.push('/test?id=1')">路由传参id=1</el-button>
        
    </div>
    <div style="margin:20px;">
        <div>
            <el-input v-model="data.input" style="width:240px" placeholder="Input" :prefix-icon="Search"/>{{ data.input }}
            <el-input  v-model="data.dd" style="width:240px" placeholder="Date" :suffix-icon="Calendar" />
            <el-input v-model="data.descr" type="textarea" style="width:300px" placeholder="Descr"/>
        </div>
        <br>
        <div>
            <el-select multiple clearable v-model="data.opt" placeholder="Select" size="large" style="width:240px">
                <el-option v-for="item in data.books" :key="item.id" :label="item.name" :value="item.value"/>
            </el-select>
            {{ data.opt }}
        </div>
        <br>
        <div>
            <el-radio-group v-model="data.radio1">
                <el-radio value="value1">Option1</el-radio>
                <el-radio value="value2">Option2</el-radio>
            </el-radio-group>
        </div>
        <div>
            <el-radio-group v-model="data.cz">
                <el-radio-button v-for="opt in data.options" :key="opt" :value="opt">{{ opt }}</el-radio-button>
            </el-radio-group>
        </div>
        <div>
            <el-checkbox-group v-model="data.ll">
                <el-checkbox v-for="ck in data.books" :key="ck.id" :value="ck.value" :label="ck.name" />
            </el-checkbox-group>
        </div>
        {{ data.ll }}
        <br>
        <div>
            <img src="@/assets/logo.svg" style="width:100px;">
            <el-image :src="img" :preview-src-list="[img]" style="width:100px;margin-left:10px;"/>
        </div>
        <br>
        <div>
            <el-carousel height="200px" style="width:500px;">
                <el-carousel-item v-for="item in data.imgs" :key="item">
                    <img :src="item" style="width:100%;"/>
                </el-carousel-item>
            </el-carousel>
        </div>
        <br>
        <div>
            <el-date-picker value-format="YYYY-MM-DD" v-model="data.date1" type="date" placeholder="select date" />
            <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="data.date1" type="datetime" placeholder="select date" />
            <el-date-picker value-format="YYYY-MM-DD" v-model="data.date3" type="daterange" start-placeholder="start date" end-placeholder="end date" range-separator="到" />
        </div>
        {{ data.date1 }}
        {{ data.date2 }}
        {{ data.date3 }}
        <br />
        <div>
            <el-table :data="data.tableData" style="width:100%" border stripe>
                <el-table-column prop="date" label="Date" width="180"/>
                <el-table-column prop="name" label="Name" width="180"/>
                <el-table-column prop="address" label="Address"/>
                <el-table-column label="内容" prop="content">
                    <template #default="scope">
                        <div v-html="scope.row.content"></div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="editContent(scope.row)">
                            编辑富文本
                        </el-button>
                        <el-button type="primary" circle size="small" @click="handleClick2(scope.row)">
                            <el-icon>
                                <Edit />
                            </el-icon>
                        </el-button>
                        <el-button type="danger" circle size="small" @click="handleClick(scope.row.id)">
                            <el-icon>
                                <Delete />
                            </el-icon>
                        </el-button>
                        
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination
                v-model:current-page="data.currentPage"
                v-model:page-size="data.pageSize"
                :page-size="[10,20,50,100]"
                layout="total,sizes,prev,pager,next,jumper"
                :total="data.tableData.length"
                />
        </div>
    </div>
    <el-dialog
    v-model="data.dialogVisible"
    title="编辑页面"
    width="500"
    >
        <div style="padding:20px">
            <div>日期：{{ data.row.date }}</div>
            <div>名称：{{ data.row.name }}</div>
            <div>地址：{{ data.row.address }}</div>
        </div>
    </el-dialog>
    <el-dialog v-model="data.formContentVisible" title="编辑内容">
        <div style="border:1px solid #ccc;width:100%;">
            <Toolbar style="border-bottom:1px solid #ccc;" :editor="editorRef" :mode="mode"/>
            <Editor style="height:500px;overflow-y:hidden;" v-model="data.form.content" :mode="mode" :defaultConfig="editorConfig" @onCreated="handleCreated"/>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="data.formContentVisible=false">取消</el-button>
                <el-button type="primary" @click="saveContent">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import {reactive,onBeforeUnmount,ref,shallowRef} from "vue"
import {Search,Calendar} from "@element-plus/icons-vue"
import img from "@/assets/logo.svg"
import p1 from "@/assets/images/1.jpg"
import p2 from "@/assets/images/2.jpg"
import p3 from "@/assets/images/3.jpg"
import router from "@/router/index.js"
import request from "@/utils/request.js"
import '@wangeditor/editor/dist/css/style.css'
import {Editor,Toolbar} from '@wangeditor/editor-for-vue'


const data = reactive({
    input:null,
    dd:null,
    opt:null,
    books:[
        {id:1,name:"三国演义",value:"sg"},
        {id:2,name:"红楼梦",value:"hlm"},
        {id:3,name:"西游记",value:"xyj"},
        {id:4,name:"水浒传",value:"shz"},
        {id:5,name:"水浒传",value:"shz2"}
    ],
    radio1:null,
    cz:null,
    options:['登录','收藏','取消'],
    ll:[],
    imgs:[p1,p2,p3],
    date1:null,
    date2:null,
    date3:null,
    tableData:[
        {id:1,date:'2025-01-10',name:'Jack',address:'China',content:'<h1>测试富文本</h1>'},
        {id:2,date:'2025-01-11',name:'小明',address:'美国',content:'<h1 style="color:red;font-size:12px;">测试富文本1</h1>'},
        {id:3,date:'2025-01-10',name:'Jack',address:'China',content:'<h1>测试富文本2</h1>'},
        {id:4,date:'2025-01-11',name:'小明',address:'美国',content:'<h1>测试富文本3</h1>'},
        {id:5,date:'2025-01-10',name:'Jack',address:'China',content:'<h1>测试富文本</h1>'},
        {id:6,date:'2025-01-11',name:'小明',address:'美国',content:'<h1>测试富文本</h1>'},
        {id:7,date:'2025-01-10',name:'Jack',address:'China',content:'<h1>测试富文本</h1>'},
        {id:8,date:'2025-01-11',name:'小明',address:'美国',content:'<h1>测试富文本</h1>'},
        {id:9,date:'2025-01-10',name:'Jack',address:'China',content:'<h1>测试富文本</h1>'},
        {id:10,date:'2025-01-11',name:'小明',address:'美国',content:'<h1>测试富文本</h1>'},
        {id:11,date:'2025-01-10',name:'Jack',address:'China',content:'<h1>测试富文本</h1>'},
        {id:12,date:'2025-01-11',name:'小明',address:'美国',content:'<h1>测试富文本</h1>'},
        {id:13,date:'2025-01-10',name:'Jack',address:'China',content:'<h1>测试富文本</h1>'},
        {id:14,date:'2025-01-11',name:'小明',address:'美国',content:'<h1>测试富文本</h1>'},
        {id:15,date:'2025-01-10',name:'Jack',address:'China',content:'<h1>测试富文本</h1>'},
        {id:16,date:'2025-01-11',name:'小明',address:'美国',content:'<h1>测试富文本</h1>'},
    ],
    currentPage:1,
    pageSize:10,
    row:null,
    dialogVisible:false,
    userList:[],
    form:{},
    mode:null
})
data.tableData = data.tableData.slice(0,10)
const handleClick = (id)=>alert(id)
const handleClick2 = (row)=>{
    data.row=row
    data.dialogVisible=true
}

request.get('/system/user/getalluser').then(res=>{
    console.log(res)
    data.userList = res.data
})

const editContent = (row)=>{
    data.formContentVisible = true
    data.form = row
}

const saveContent =()=>{
    data.formContentVisible = false
}
/**
 * wangEditor5初始化开始
 */
const editorRef = shallowRef()
const mode = 'default'
const editorConfig = {MENU_CONF:{}}
///组件销毁时，也及时销毁编辑器，否则造成内存泄漏
onBeforeUnmount(()=>{
    const editor = editorRef.value
    if(editor == null) return
    editor.destroy()
})
//记录editor 实例
const handleCreated = (editor)=>{
    editorRef.value = editor
}
</script>